<template>
    <div class="order">
      <h1>确认订单</h1>
      <div v-if="selectedGoods.length > 0">
        <!-- 删除或注释掉地址相关部分 -->
        <!-- <div class="address">
          <h3>收货地址</h3>
          <div v-if="selectedAddress" class="address-info">
            <div>姓名：{{ selectedAddress.name }}</div>
            <div>电话：{{ selectedAddress.phone }}</div>
            <div>地址：{{ selectedAddress.address }}</div>
            <router-link :to="{ name: 'addressList' }">
              <van-button type="primary" size="small">切换地址</van-button>
            </router-link>
          </div>
          <div v-else class="no-address">
            <p>暂无收货地址，请添加</p>
            <router-link :to="{ name: 'addressList' }">
              <van-button type="primary" size="small">添加地址</van-button>
            </router-link>
          </div>
        </div> -->
  
        <div class="order-details">
          <h3>订单详情</h3>
          <div v-for="item in selectedGoods" :key="item.id" class="order-item">
            <div class="item-name">{{ item.name }} x{{ item.num }}</div>
            <div class="item-price">单价：￥{{ item.price }}</div>
            <div class="item-subtotal">小计：￥{{ item.price * item.num }}</div>
          </div>
          <div class="total">总计：￥{{ total }}</div>
        </div>
        <div class="order-time">
          <h3>订单创建时间</h3>
          <div>{{ orderTime }}</div>
        </div>
        <div class="order-number">
          <h3>订单编号</h3>
          <div>{{ orderNumber }}</div>
        </div>
        <van-button type="primary" @click="placeOrder">支付</van-button>
      </div>
      <div v-else class="no-goods">
        没有选中的商品
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, computed, onMounted } from 'vue';
  import { useRoute } from 'vue-router';
  import { showToast } from 'vant';
  import { format } from 'date-fns'; // 引入 date-fns 库用于格式化日期
  
  const route = useRoute();
  const selectedGoods = ref([]);
  
  onMounted(() => {
    // 从查询参数中获取选中的商品信息
    const goods = route.query.goods;
    if (goods) {
      selectedGoods.value = JSON.parse(goods).map(item => ({
        ...item,
        num: item.num || 1 // 确保每个商品都有 num 属性
      }));
    }
  });
  
  const total = computed(() => {
    return selectedGoods.value.reduce((sum, item) => sum + item.price * (item.num || 1), 0);
  });
  
  const orderTime = ref(format(new Date(), 'yyyy-MM-dd HH:mm:ss')); // 当前时间
  
  const orderNumber = ref(`ORD${Date.now()}`); // 生成订单编号
  
  // 删除或注释掉与地址相关的逻辑
  // const selectedAddress = ref(JSON.parse(localStorage.getItem('selectedAddress')) || null);
  
  // const isValidAddress = computed(() => {
  //   return selectedAddress.value && selectedAddress.value.name && selectedAddress.value.phone && selectedAddress.value.address;
  // });
  
  const placeOrder = () => {
    // 删除或注释掉地址验证逻辑
    // if (!isValidAddress.value) {
    //   showToast('请填写完整的收货地址');
    //   return;
    // }
  
    // 创建订单对象
    const order = {
      id: orderNumber.value,
      time: orderTime.value,
      // address: selectedAddress.value,
      goods: selectedGoods.value,
      total: total.value
    };
  
    // 获取当前用户的订单列表
    let orders = JSON.parse(localStorage.getItem('myOrders')) || [];
  
    // 将新订单添加到订单列表
    orders.push(order);
  
    // 保存更新后的订单列表到 localStorage
    localStorage.setItem('myOrders', JSON.stringify(orders));
  
    // 显示成功消息
    showToast('支付成功');
  
    // 可以在此处添加更多逻辑，如跳转到订单列表页面等
  };
  </script>
  
  <style scoped>
  .order {
    padding: 1rem;
    max-width: 600px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  h1 {
    text-align: center;
    color: #333;
    margin-bottom: 1rem;
  }
  
  .order-details {
    margin-top: 1rem;
    background-color: #fdeff3;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    padding: 1rem;
  }
  
  .order-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 1rem;
  }
  
  .item-name, .item-price, .item-subtotal {
    color: #555;
  }
  
  .total {
    font-weight: bold;
    margin-top: 1rem;
    text-align: right;
    color: #333;
    font-size: 1.2rem;
  }
  
  .order-time, .order-number {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    padding: 1rem;
    margin-top: 1rem;
  }
  
  .order-time div, .order-number div {
    color: #555;
    text-align: center;
  }
  
  .van-button {
    width: 100%;
    margin-top: 1rem;
    background-color: #f11a27;
    border-color: #f11a27;
  }
  
  .van-button[disabled] {
    background-color: #ccc;
    border-color: #ccc;
  }
  
  .no-goods {
    text-align: center;
    color: #555;
    margin-top: 2rem;
  }
  </style>